<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>写博客</title>
    <script src="/js/axios.js" ></script>
    <script src="/js/vue.js" ></script>
    <link href="/el/element.css" rel="stylesheet"  type="text/css"/>
    <script src="/el/element.js"></script>
    <script src="/js/wangEditor.js"></script>
</head>
<body>
  <div id="app">

      <div>
          <el-link type="primary" href="/api/fore/person/go2PersonCenter">返回个人中心</el-link>
          <h4>请选择对应的类型</h4>
          <el-select v-model="type" placeholder="请选择">
              <el-option
                      v-for="item in types"
                      :key="item.id"
                      :label="item.type"
                      :value="item.id">
              </el-option>
          </el-select>
      </div>
      <div>
          <h4>请输入你的标题</h4>
          <el-input
                  type="textarea"
                  :rows="5"
                  placeholder="请输入此博客的标题"
                  v-model="textarea">
          </el-input>
      </div>

      <div>
          <h4>请编辑你的博客内容</h4>
          <div id="editor" class="editor"></div>
      </div>
      <el-button v-on:click="sendBlog()" type="primary" plain>
          添加
      </el-button>
  </div>
</body>

<script>
    new Vue({

        el:"#app",
        data:{
            editor:"",
            textarea:"",
            types:[],
            type:{},
            blog:{
                title:"",
                typeid:"",
                digest:"",
            },
            content:{
                content:"",
            },
        },
        methods: {
            sendBlog(){
                var that =this
                console.log(this.type)
                console.log(this.textarea)
                var a =this.editor.txt.text().substring(0,50)
                this.blog.title=this.textarea
                this.blog.digest=a
                this.blog.typeid=this.type
                this.content =this.editor.txt.html()
                var fd =new FormData();
                fd.append("typeid",this.blog.typeid)
                fd.append("digest",this.blog.digest)
                fd.append("title",this.blog.title)
                fd.append("content",this.content)
                axios.post("/api/fore/blog/addBlog",
                    fd,{headers:{'Content-Type':'multipart/form-data'}})
                    .then(function(resq){
                        that.$message({
                            showClose: true,
                            offset: 100,
                            message: resq.data.msg,
                            type: 'success'
                        });
                        top.location.href="/api/public/go2Index";
                    })
            }
        },
        mounted(){
            this.editor =new wangEditor("#editor");
            this.editor.config.uploadImgShowBase64= true;
            this.editor.config.showLinkImg =true;
            this.editor.config.uploadImgMaxSize=5*1024*1024;
            this.editor.create();
            this.editor.txt.html();
             var that =this
            axios.get("/api/public/findAllType").then(
                function (resq) {
                    console.log(resq.data.data)
                    that.types= resq.data.data
                }
            )


        }
    })
</script>
</html>